<template>
	<view :class="['container',{'dark':theme=='dark'}]">
		<view :class="['wrap',{'darksss':theme=='dark'}]">
			
			<!-- 修改样式 -->
			
			<u-table border-color="#22253c00" bg-color="#22253c00" align="left" padding="14rpx 0" v-for="(item,index) in dataList">
				
				<view :class="['juzonucom','tool-card',{'darksss':theme=='dark'}]">
					
					<!-- <view :class="['wrap','juzonucg',{'darksss':theme=='dark'}]">
						 {{$t('bico.W301')}} {{item.optionNo}} {{$t('bico.W302')}} 
						{{item.symbol}}
					</view>

					<u-line color="#5559691f"></u-line>
					<u-gap height="20" bg-color=""></u-gap> -->
					<u-tr>
						<u-td style="font-weight: 700;">{{item.symbol}}</u-td>
						<!-- <u-td class="juzonuc" style="color: #FF9800;">{{coinInfo.openTimeGap}}S {{$t('bico.W308')}}</u-td> -->
						<u-td class="juzon flex2">
						<view>
							{{resultStatus[item.result]}} 
							(<span :class="item.result!='2'?'green':'red'">{{item.result!="2"?"+":""}}{{item.rewardAmount}}</span>{{item.baseSymbol}})
							<u-icon @click="change(item)" class="uicon-arrow-down u-iconfont" style="margin-left: 20upx;"/>
							
						</view>
						
						 </u-td>
						 
					</u-tr>
					<u-tr v-if="item.flag">
						<u-td>{{$t('bico.W304')}}</u-td><u-td class="juzonuc">{{item.betAmount}} {{item.baseSymbol}}</u-td><u-td class="juzon">{{Status2[item.status]}}</u-td>
					</u-tr>
					<u-tr v-if="item.flag">
						<u-td>{{$t('bico.W305')}}</u-td><u-td class="juzonuc">{{item.direction == '0' ?$t('bico.W649'):$t('bico.W650')}}</u-td><u-td class="juzon">{{$t('bico.W309')}}：{{item.fee}}</u-td>
					</u-tr>
					<u-tr v-if="item.flag">
						<u-td>{{$t('bico.W306')}}</u-td><u-td class="juzonuc">{{item.rewardAmount}} {{item.baseSymbol}}</u-td><u-td class="juzon">{{$t('bico.W310')}}：{{item.winFee}}</u-td>
					</u-tr>
					<u-tr v-if="item.flag">
						<u-td>{{$t('bico.W307')}}</u-td><u-td class="juzonuc">{{item.createTime|formatYMD}}</u-td><u-td class="juzon">{{item.createTime|formatHMS}}</u-td>
					</u-tr>
					<u-tr v-if="item.flag">
						<u-td>{{$t('bico.W820')}}</u-td><u-td class="juzonuc" style="text-align: right;padding-right: 30px;">{{item.openPrice}}</u-td>
					</u-tr>
					<u-tr v-if="item.flag">
						<u-td>{{$t('bico.W821')}}</u-td><u-td class="juzonuc" style="text-align: right; padding-right: 30px;">{{item.closePrice}}</u-td>
					</u-tr>
					<u-tr>
						<u-td>{{$t('bico.W826')}}</u-td><u-td class="juzonuc" style="text-align: right; padding-right: 30px;">{{item.optionNo}}</u-td>
					</u-tr>
				</view>
				
				<u-gap height="20" bg-color=""></u-gap>

			</u-table>
			<!-- 修改样式 -->

			<u-gap height="40" bg-color=""></u-gap>
			<!-- <u-button type="primary">撤 单</u-button> -->

		</view>
	</view>
</template>

<script>
	import {
		domain
	} from '@/common/domain.js'
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'vuex';
	import uniPopup from '@/components/uni-popup2.vue';
	import {
		contractOptionOrderHistory,
		contractOptionCoinInfo
	} from '../../common/apiString.js'
	import {
		myMixins
	} from '@/common/myMixins.js' //加入全局下拉刷新
	export default {
		mixins: [myMixins],
		data() {
			return {
				coinInfo: {},
				dataList: [],
				currentCoinSymbol: "",
				pageNo: 1,
				pageSize: 2,
				zdStatus: {
					'0': this.$t('bico.W179'),
					'1': this.$t('bico.W180'),
					'2': this.$t('bico.W181'),
					'3': this.$t('bico.W182'),
					'4': this.$t('bico.W183'),
				},
				resultStatus: {
					'0': this.$t('bico.W311'),
					'1': this.$t('bico.W312'),
					'2': this.$t('bico.W313'),
					'3': this.$t('bico.W314'),

				},
				Status2: {
					'0': this.$t('bico.W315'),
					'1': this.$t('bico.W316'),
					
				
				},
			}
		},
		computed: {
			...mapState({
				theme: state => state.theme
			}),
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: this.$t('bico.W317'),
			})
			this.$utils.setTheme(this.theme);
			if(option.symbol){
				this.currentCoinSymbol = option.symbol
			}
			this.getData()
			
			var d=new Date(); //创建一个Date对象
			
			var localTime = d.getTime();
			
			var localOffset=d.getTimezoneOffset()*60000; //获得当地时间偏移的毫秒数
			
			var utc = localTime + localOffset; //utc即GMT时间
			
			var offset =8; //以夏威夷时间为例，东10区
			
			var hawaii = utc + (3600000*offset);
			
			var nd = new Date(hawaii);
			
			console.log("Hawaii time is " + nd.toLocaleString() );
			this.getInfo()
		},
		filters: {
			formatYMD: function(value) {
				var zen = ' GMT+8'
				// console.log(value)
				var time = new Date(value+zen);
				
				if(time == "Invalid Date"){
						value = value.replace(/T/g,' ').replace(/-/g,"/").indexOf('.')>-1?value.replace(/T/g,' ').replace(/-/g,"/").substring(0,value.replace(/T/g,' ').replace(/-/g,"/").indexOf('.')):value.replace(/T/g,' ').replace(/-/g,"/")
						time = new Date(value+zen);
				}
				//var stringDate = new Date(val);
				var timeZone = (new Date().getTimezoneOffset()) * 60 * 1000;
				
				// var time = time - timeZone;
				console.log( new Date().getTimezoneOffset())
				
				var localTime = time.getTime();
				
				var localOffset=time.getTimezoneOffset()*60000; //获得当地时间偏移的毫秒数
				
				var utc = localTime + localOffset; //utc即GMT时间
				
				var offset =(new Date().getTimezoneOffset()/(-60)); //以夏威夷时间为例，东10区
				
				var hawaii = utc + (3600000*offset);
				
				var time = new Date(hawaii);
				
				
				var y = time.getFullYear();
				var m =time.getMonth()+1;
				var d = time.getDate() ;
				
				return y + '-' + (m<10?'0'+m:m) + '-' + (d<10?'0'+d:d);
			},
			formatHMS: function(value) {
				var zen = ' GMT+8'
				var time = new Date(value+zen);
				if(time == "Invalid Date"){
						value = value.replace(/T/g,' ').replace(/-/g,"/").indexOf('.')>-1?value.replace(/T/g,' ').replace(/-/g,"/").substring(0,value.replace(/T/g,' ').replace(/-/g,"/").indexOf('.')):value.replace(/T/g,' ').replace(/-/g,"/")
						time = new Date(value+zen);
				}
				//var timeZone = (new Date().getTimezoneOffset()) / -60 ;
				//console.log(timeZone)
				var localTime = time.getTime();
				
				var localOffset=time.getTimezoneOffset()*60000; //获得当地时间偏移的毫秒数
				
				var utc = localTime + localOffset; //utc即GMT时间
				
				var offset =(new Date().getTimezoneOffset()/(-60)); //以夏威夷时间为例，东10区
				
				var hawaii = utc + (3600000*offset);
				
				var time = new Date(hawaii);
				//var time = time - timeZone;
				var h = time.getHours() ;
				var mm = time.getMinutes() ;
				var s = time.getSeconds() ;
				return (h<10?'0'+h:h) + ':' + (mm<10?'0'+mm:mm) + ':' + (s<10?'0'+s:s);
			}
		},
		methods: {
			change(item){
				if("flag" in item){
					item.flag=!item.flag
				}else{
					item.flag=false
				}
				
			},
			
			add0(m) {
				return m < 10 ? '0' + m : m
			},
			format(shijianchuo) {
				//shijianchuo是整数，否则要parseInt转换
			 var time = new Date(shijianchuo);
				var y = time.getFullYear();
				var m = time.getMonth() + 1;
				var d = time.getDate() + 1;
				var h = time.getHours() + 1;
				var mm = time.getMinutes() + 1;
				var s = time.getSeconds() + 1;
				return y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' + add0(s);
			},
			getData() {
				var dataArr={
					'pageNo': this.pageNo - 1,
					'pageSize': this.pageSize
				}
				if(this.currentCoinSymbol!=""){
					dataArr.symbol = this.currentCoinSymbol
				}
				this.$utils.initDataToken({
						url: contractOptionOrderHistory,
						type: 'post',
						data: dataArr
					},
					res => {
						res.records.forEach((item, i) => {
							item.flag=true
							this.dataList.push(item)
						})
						
					})
			},
			getInfo() {
				this.$utils.initDataToken({
						url: contractOptionCoinInfo,
						type: 'post',
						data: {
							'symbol': this.currentCoinSymbol,
						}
					},
					res => {

						this.coinInfo = res.data;
					})
			}

		}
	}
</script>

<style lang="scss">
	.flex2{
		flex: 2;
	}
	page {
		background: #f7f7f7;

	}

	.container {
		width: 100%;
		height: 100%;
		
		.wrap {
			padding: 8px;
		}
		
		.u-row {
			margin: 40rpx 0;
		}
		
		.demo-layout {
			height: 80rpx;
			border-radius: 8rpx;
		}
		
		.bg-purple {
			background: #d3dce6;
		}
		
		.bg-purple-light {
			background: #e5e9f2;
		}
		
		.bg-purple-dark {
			background: #99a9bf;
		}
		
		.top1 {
			font-size: 3.4vw;
			font-weight: 700;
			position: relative;
			left: 0vw;
		}
		
		.top2 {
			font-size: 3.4vw;
			font-weight: 700;
			position: relative;
			left: 7vw;
		}
		
		.top3 {
			font-size: 3.4vw;
			font-weight: 700;
			position: relative;
			left: 12vw;
		}
		
		.top4 {
			position: relative;
			left: 0vw;
			position: relative;
			border: 0;
			display: inline-flex;
			overflow: visible;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			cursor: pointer;
		
			z-index: 1;
			box-sizing: border-box;
			transition: all 0.15s;
			font-size: 14px;
		}
		
		.top5 {
			position: relative;
			left: 5vw;
			position: relative;
			border: 0;
			display: inline-flex;
			overflow: visible;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			cursor: pointer;
		
			z-index: 1;
			box-sizing: border-box;
			transition: all 0.15s;
			font-size: 14px;
		}
		
		.clou {
		
			font-size: 14px;
		}
		.juzon {
			
			text-align: right!important;
		}
		.juzonuc {
			
			position: relative;
			top: 0vw;
			left: 7vw;
		}
		.juzonucg {
			text-align: left;
			font-size: 14px;
			padding: 10px 0px;
			font-weight: 700;
			position: relative;
			top: -1vw;
			left: 0vw;
		}
		.juzonucom {
			border: 0.5px solid #7079ab24;
			border-radius: 8px;
			padding: 10px 4px;
		}
		.tool-card {
			background-color: #ffffff;
		}
		
		
		
		
		
		
		
	}

</style>
